<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <script src="../js/myQuery.js"></script> -->
    <!-- <script src="../js/jquery-1.10.1.min.js"></script> -->
    <script src="../js/jquery-3.6.0.min.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        li {
            list-style: none;
            line-height: 40px;
        }

        .title {
            line-height: 40px;
        }

        .list {
            overflow: hidden;
        }

        .list li {
            border: 1px dashed #333;
            text-indent: 10px;
            height: 40px;
        }

        .box {
            margin-top: 20px;
        }
    </style>
</head>

<body>
    <h3 id="title">模拟封装jquery</h3>
    <input class="inp" type="text">
    <div class="list">
        <li>li_01</li>
        <li>li_02</li>
        <li>li_03</li>
        <li>li_04</li>
        <li>li_05</li>
        <li>li_06</li>
        <li>li_07</li>
        <li>li_08</li>
        <li>li_09</li>
        <li>li_10</li>
    </div>
    <div class="box">
        <button class="setHtml">
            设置html
        </button>
        <button class="getHtml">
            获取html
        </button>
        <button class="hide">隐藏</button>
        <button class="show">显示</button>
        <button class="setWidth">
            设置宽度
        </button>
        <button class="getWidth">
            获取宽度
        </button>

        <button class="attr">attr</button>
        <button class="prop">prop</button>
        <button class="css">css</button>
        <button class="addClass">addClass</button>
        <button class="removeClass">removeClass</button>
        <button class="eq">eq</button>
        <button class="siblings">siblings</button>
        <button class="chain">链式操作</button>
    </div>
</body>
<script>

    $(".setHtml").click(function () {
        $(".list li").html("hello");
    })
    $(".getHtml").click(function () {
        alert($(".list li").html());
    })

    $(".hide").click(function () {
        $(".list li").hide();
    })
    $(".show").click(function () {
        $(".list li").show();
    })
    $(".setWidth").click(function () {
        // $(".list li").width("200px");
        $(".list li").width(200);
    })
    $(".getWidth").click(function () {
        // $(".list li").width("200px");
        alert($(".list li").width());
    });
    $(".css").click(function () {
        // $(".list li").width("200px");
        // $(".list li").css("background", "red");
        // console.log($(".list li").css("backgroundColor"));

        // $(".list li").css("background", "red");
        // $(".list li").css("width", "100px");
        // $(".list li").css("height", "100px");
        // $(".list li").css("float", "left");
        // $(".list li").css("text-align", "center");
        // $(".list li").css("line-height", "100px");

        $(".list li").css({
            background: "red",
            width: "100px",
            height: "100px",
            float: "left",
            textAlign: "center",
            lineHeight: "100px",
        })
    })

    $(".attr").click(function () {
        $(".list li").attr("asd", "123");
        $(".list li").attr("class", "one");

        console.log($(".list li").attr("asd"));
        console.log($(".list li").attr("class"));
    })
    $(".prop").click(function () {
        $(".list li").prop("id", "box");
        $(".list li").prop("className", "one");

        console.log($(".list li").prop("id"));
        console.log($(".list li").prop("className"));
    })

    $(".addClass").click(function () {
        $(".list li").addClass("one", "two", "three");
    })
    $(".removeClass").click(function () {
        $(".list li").removeClass("one", "three");
    })

    $(".eq").click(function () {
        console.log($(".list li").eq(0));
        $(".list li").eq(0).css({ background: "red" })
    })
    $(".siblings").click(function () {
        console.log($(".list li").eq(0).siblings());
        $(".list li").eq(0).siblings().css({ background: "blue" })
        // $(".list li").eq(0).css({ background: "red" }).siblings()
    })

    $(".chain").click(function () {
        $(".list li").eq(0).css({ background: "red" }).html("hello").width(200).addClass("active").siblings().css({ background: "blue" }).html("world").width(400).removeClass("active");
    })



</script>

</html>